package com.eliza.base.views.learn.layouts.basic

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController

//分页器

@Preview
@Composable
private fun asas() {
    FlowX.Show(navController = rememberNavController())

}

object FlowX {
    //    FlowRow 或 FlowColumn
    @Composable
    fun Show(navController: NavController) {
        Column {
            var count by remember {
                mutableIntStateOf(0)
            }
            Button(onClick = { count = (count + 1) % 4 }) {
                Text(text = "ModifiersX $count")
            }
            when (count) {
                0 -> FlowRowX()
                1 -> SameSizeFlowRowX()
            }
        }
    }

    val textX: @Composable (text: String) -> Unit = { text ->
        Text(
            text, modifier = Modifier
                .border(1.dp, Color.Yellow)
                .clip(RoundedCornerShape(20.dp))
        )

    }

    /*
    *
    * 延迟创建
    HorizontalPager 和 VerticalPager 中的页面会根据需要进行延迟组合和布局。
    * 当用户滚动页面时，该可组合项会移除不再需要的所有页面。
    * */
    @OptIn(ExperimentalLayoutApi::class)
    @Composable
    private fun FlowRowX() {
        // Display 10 items
        FlowRow(
            modifier = Modifier
                .padding(8.dp)
                .background(Color.LightGray)
        ) {
            textX("Price: High to Low")
            textX("Avg rating: 4+")
            textX("Free breakfast")
            textX("Free cancellation")
            textX("£50 pn")
        }
    }

    /*
    * 延迟加载数据流项
    ContextualFlowRow 和 ContextualFlowColumn 是 FlowRow 和 FlowColumn 的专用版本，
    * 可让您延迟加载数据流行或列的内容。这些视图还会提供有关项位置（索引、行号和可用大小）的信息，例如，项是否位于第一行
*
    * maxLines 参数用于限制显示的行数
    * overflow 参数用于指定在项目达到溢出值时应显示的内容，从而允许您指定自定义 expandIndicator 或 collapseIndicator。 */
    @OptIn(ExperimentalLayoutApi::class)
    @Composable
    private fun LazyFlowRowX() {
        val totalCount = 40
        var maxLines by remember {
            mutableStateOf(2)
        }
//Added in 1.7.0-beta01
//        val moreOrCollapseIndicator = @Composable { scope: ContextualFlowRowOverflowScope ->
//            val remainingItems = totalCount - scope.shownItemCount
//            ChipItem(if (remainingItems == 0) "Less" else "+$remainingItems", onClick = {
//                if (remainingItems == 0) {
//                    maxLines = 2
//                } else {
//                    maxLines += 5
//                }
//            })
//        }
//        ContextualFlowRow(
//            modifier = Modifier
//                .safeDrawingPadding()
//                .fillMaxWidth(1f)
//                .padding(16.dp)
//                .wrapContentHeight(align = Alignment.Top)
//                .verticalScroll(rememberScrollState()),
//            verticalArrangement = Arrangement.spacedBy(4.dp),
//            horizontalArrangement = Arrangement.spacedBy(8.dp),
//            maxLines = maxLines,
//            overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator(
//                minRowsToShowCollapse = 4,
//                expandIndicator = moreOrCollapseIndicator,
//                collapseIndicator = moreOrCollapseIndicator
//            ),
//            itemCount = totalCount
//        ) { index ->
//            ChipItem("Item $index"){}
//        }
    }

    private val ChipItem: @Composable (s: String, onClick: () -> Unit) -> Unit = { s, click ->
        IconButton(onClick = click) {
            textX(s)
        }
    }

    @OptIn(ExperimentalLayoutApi::class)
    @Composable
    private fun SameSizeFlowRowX() {
        val rows = 3
        val columns = 3
        FlowRow(
            modifier = Modifier.padding(4.dp),
            horizontalArrangement = Arrangement.spacedBy(4.dp),
            maxItemsInEachRow = rows
        ) {
            // Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) 或 Modifier.fillMaxWidth(fraction)）结合使用。
            // 这些修饰符全都协同工作，以实现自适应调整 FlowRow（或 FlowColumn）内的项的大小。
            val itemModifier = Modifier
                .padding(4.dp)
                .height(80.dp)
                .weight(1f)
                .clip(RoundedCornerShape(8.dp))
                .background(Color.Blue)
            repeat(rows * columns) {
                if ((it + 1) % 3 == 0) {
                    Spacer(modifier = itemModifier.fillMaxWidth())
                } else {
                    Spacer(modifier = itemModifier.weight(0.5f))
                }
            }
        }
    }

    @OptIn(ExperimentalLayoutApi::class)
    @Composable
    private fun PlaceX() {
        //FlowRow：中间项，占整个容器宽度的 0.7%。
        Column {
            val boxs: @Composable () -> Unit = {
                val itemModifier = Modifier
                    .clip(RoundedCornerShape(8.dp))
                Box(
                    modifier = itemModifier
                        .height(200.dp)
                        .width(60.dp)
                        .background(Color.Red)
                )
                //Modifier.fillMaxWidth(fraction)，您可以指定某个项应占用的容器大小
                Box(
                    modifier = itemModifier

                        .height(200.dp)
                        .fillMaxWidth(0.7f)
                        .background(Color.Blue)
                )
                Box(
                    modifier = itemModifier
                        .height(200.dp)
                        .weight(1f)
                        .background(Color.Magenta)
                )
            }
            // 1.7.0alpha
            // 将 Modifier.fillMaxColumnWidth() 或 Modifier.fillMaxRowHeight()
            // 应用于 FlowColumn 或 FlowRow 中的项可确保同一列或行中的项采用与列/行中的最大项相同的宽度或高度。
            FlowRow(
                modifier = Modifier.padding(4.dp),
                horizontalArrangement = Arrangement.spacedBy(4.dp),
                maxItemsInEachRow = 3
            ) {
                boxs()
            }
            Row(
                modifier = Modifier.padding(4.dp),
                horizontalArrangement = Arrangement.spacedBy(4.dp),
            ) {
                boxs()
            }
        }

    }
}